<!-- 编辑个人信息页面 -->
<template>
  <div class="container">
    <uni-nav-bar
      fixed="true"
      title="编辑资料"
      status-bar="true"
      :border="false"
      left-icon="left"
      @click-left="back"
    />
    <div class="body">
      <!-- 我的头像 -->
      <div class="my-avatar">
        <!-- 修改头像用的透明按钮 -->
        <button
          class="edit-avatar-btn"
          open-type="chooseAvatar"
          @chooseavatar="chooseAvatar"
        />
        <div class="text">
          我的头像
        </div>
        <image
          class="img mid"
          :src="temAvatarPath || userInfo.avatar || '/src/static/images/common/default-avatar.png'"
          mode="aspectFill"
        />
        <image
          class="arrow"
          src="@/static/icons/common/arrow.png"
          mode="aspectFill"
        />
      </div>
      <!-- 我的昵称 -->
      <div
        class="my-nickname"
        @click="toggleEditNicknamePopup(true)"
      >
        <div class="text">
          我的昵称
        </div>
        <div class="nickname mid">
          {{ temNickname }}
        </div>
        <image
          class="arrow"
          src="@/static/icons/common/arrow.png"
          mode="aspectFill"
        />
      </div>
      <!-- 确认按钮 -->
      <button
        class="confirm-btn"
        @click="completeClick"
      >
        确认
      </button>
    </div>
  </div>
  <!-- 输入昵称弹窗 -->
  <uni-popup
    ref="editNicknamePopup"
    :is-mask-click="false"
    mask-background-color="rgba(0,0,0,.6)"
  >
    <div class="popup-container">
      <!-- 中间的弹窗 -->
      <div class="popup">
        <div class="title">
          编辑昵称
        </div>
        <input
          :value="temNickname"
          class="input"
          type="nickname"
          placeholder="请输入昵称"
          placeholder-style="color: #9f9f9f;"
          :maxlength="20"
          @input="inputNickname"
        >
        <div
          class="btn confirm-btn"
          @click="editNicknameConfirm"
        >
          确定
        </div>
      </div>
      <!-- 关闭按钮 -->
      <img
        class="close-btn"
        src="@/static/icons/common/close.png"
        @click="toggleEditNicknamePopup(false)"
      >
    </div>
  </uni-popup>
</template>

<script lang="ts" setup>
import { useActivity202310 } from '@/stores/activity-202310-store';
import { useUser } from '@/stores/user';
import { back, navigateTo } from '@/utils/navigate';
import { showToast } from '@/utils/tools';

const userStore = useUser();
const { uploadAvatarAndName } = userStore;
const { userInfo } = storeToRefs(userStore);

const currentInstance = getCurrentInstance();

// #region 编辑头像相关

/** 临时头像地址 */
const temAvatarPath = ref('');

/** 头像选择事件 */
const chooseAvatar = (e: any) => {
  temAvatarPath.value = e.detail.avatarUrl;
};

/** 「完成」按钮点击事件 */
const completeClick = async () => {
  // 检查是否有头像和昵称
  if (!temAvatarPath.value && !userInfo.value.avatar) {
    showToast('请上传头像');
    return;
  }

  if (!temNickname) {
    showToast('请填写昵称');
    return;
  }

  userInfo.value.nickname = temNickname.value;

  /** 2023年十月活动资料更新方法 */
  const activity202310DataUpdate = async () => {
    const activity202310Store = useActivity202310();
    activity202310Store.setPersonInfo202310();
    activity202310Store.setTeamInviteCompetitionData();
  };

  try {
    // 更新头像和昵称
    await uploadAvatarAndName(temAvatarPath.value);
    navigateTo('my');
    showToast('编辑资料成功');
    activity202310DataUpdate();
  } catch (e) {
    console.error('编辑资料失败', e);
    showToast('编辑资料失败');
  }
};

// #endregion

// #region 编辑昵称相关

/** 临时昵称变量 */
const temNickname = ref(userInfo.value.nickname);

/** 「修改昵称」弹窗输入内容 */
const inputContent = ref(temNickname.value);

/**
 * 「修改昵称」弹窗切换显示
 * @param isShow 是否显示
 */
const toggleEditNicknamePopup = (isShow = false) => {
  const editNicknamePopup: any = currentInstance?.refs.editNicknamePopup;
  switch (isShow) {
    case false:
      editNicknamePopup.close();
      break;
    case true:
      editNicknamePopup.open();
      break;
    default:
      break;
  }
};

/** 昵称输入事件 */
const inputNickname = (e: any) => {
  inputContent.value = e.detail.value;
};

/** 「修改昵称」弹窗确定按钮点击事件 */
const editNicknameConfirm = () => {
  if (inputContent.value === '') {
    showToast('请输入昵称');
    return;
  }
  temNickname.value = inputContent.value;
  toggleEditNicknamePopup(false);
};

// #endregion
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template:
    "nav" auto "body" 1fr / 1fr;

  .body {
    grid-area: body;

    background: $page-bg-color;

    padding: 0 16px;
    display: grid;
    grid-template:
      "." 20px
      "avatar" 13.8462vw
      "nickname" 13.8462vw
      '.' 181px
      "confirm-btn" 1fr
      '.' 1fr
      / 1fr;

    // grid-template-rows: 20px 13.8462vw 13.8462vw 1fr;
    grid-template-columns: 1fr;
    ;

    // 我的头像和我的昵称的共有样式
    .my-avatar,
    .my-nickname {
      background: #fff;

      padding: 0 16px;
      display: grid;
      grid-template:
        "text mid arrow" 1fr / 76px 1fr 36px;
      align-items: center;
      justify-items: end;

      .text {
        grid-area: text;

        font-size: 16px;
        color: #333;
      }

      .mid {
        grid-area: mid;

        border-radius: 50%;
      }

      .arrow {
        grid-area: arrow;

        width: 16px;
        height: 16px;
      }
    }

    // 我的头像
    .my-avatar {
      grid-area: avatar;

      position: relative;

      // 下边框颜色为#ccc再加上40%的透明度
      border-bottom: 1px solid rgb(204 204 204 / 60%);

      .edit-avatar-btn {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        opacity: 0;
      }

      .img {
        width: 40px;
        height: 40px;

        border-radius: 50%;
      }
    }

    // 我的昵称
    .my-nickname {
      grid-area: nickname;

      .nickname {
        font-size: 16px;
        color: #999;
      }
    }

    .confirm-btn {
      grid-area: confirm-btn;
      align-self: center;
      justify-self: center;

      width: 342px;
      height: 42px;

      background: $button-bg;

      font-size: 4.1026vw;
      color: #fff;
    }
  }
}

// 「修改昵称」弹窗
.popup-container {
  width: 76.9231vw;

  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  grid-row-gap: 39px;
  justify-items: center;

  // 弹窗主体
  .popup {
    position: relative;

    width: 76.9231vw;

    background: #fff;
    border-radius: 4px;

    padding: 16px;
    display: grid;
    grid-template:
      'title' 21px
      '.' 12px
      'input' 1fr
      '.' 40px
      'btn' 36px;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;

      font-size: 3.8462vw;
      color: #333;
    }

    // 输入框
    .input {
      grid-area: input;
      align-self: center;

      width: calc(76.9231vw - 32px);
      min-height: 10.5128vw;

      border: 1px solid #D7D7D7;
      border-radius: 4px;

      padding-left: 10px;
      box-sizing: border-box;

      font-size: 3.8462vw;

      // 文字两端对齐
      text-align: justify;

      // 占位文字样式
      &::placeholder {
        color: red;
      }

    }

    // 「确定」按钮
    .btn {
      grid-area: btn;

      width: 68.7179vw;

      background: $button-bg;
      border-radius: 4px;

      // 文字居中
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 3.5897vw;
      color: #fff;
    }
  }

  // 取消按钮
  .close-btn {
    width: 8.7179vw;
    height: 8.7179vw;
  }
}
</style>
